<template>
  <div>
    <a-spin :spinning="isLoading">
      <a-form :model="editForm" name="edit-form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="editPost">
        <template v-if="editForm.company_account_name">
          <a-form-item label="收款账户名" name="company_account_name" :rules="[{ required: true, message: '请输入收款账户名' }]">
            <a-input v-model:value="editForm.company_account_name.content" placeholder="请输入收款账户名" />
          </a-form-item>
        </template>
        <template v-if="editForm.company_bank">
          <a-form-item label="收款账户港币支票户口" :name="['company_bank', 'content', 'hkd']"
            :rules="[{ required: true, message: '请输入收款账户港币支票户口' }]">
            <a-input v-model:value="editForm.company_bank.content.hkd" placeholder="请输入收款账户港币支票户口" />
          </a-form-item>
          <a-form-item label="收款账户美元支票户口" :name="['company_bank', 'content', 'usd']"
            :rules="[{ required: true, message: '请输入收款账户美元支票户口' }]">
            <a-input v-model:value="editForm.company_bank.content.usd" placeholder="请输入收款账户美元支票户口" />
          </a-form-item>
          <a-form-item label="收款账户人民币结单储蓄户口" :name="['company_bank', 'content', 'cny']"
            :rules="[{ required: true, message: '请输入收款账户人民币结单储蓄户口' }]">
            <a-input v-model:value="editForm.company_bank.content.cny" placeholder="请输入收款账户人民币结单储蓄户口" />
          </a-form-item>
          <a-form-item label="收款账户多种货币结单储蓄户口(CNH,USD&HKD)" :name="['company_bank', 'content', 'multi']"
            :rules="[{ required: true, message: '请输入收款账户多种货币结单储蓄户口(CNH,USD&HKD)' }]">
            <a-input v-model:value="editForm.company_bank.content.multi" placeholder="请输入收款账户多种货币结单储蓄户口(CNH,USD&HKD)" />
          </a-form-item>
        </template>
        <!-- 用户协议 -->
        <template v-if="editForm.user_agreement">
          <a-form-item :label="editForm.user_agreement.description"
            :name="['user_agreement', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_user_agreement" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.user_agreement.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_user_agreement" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.user_agreement_us">
          <a-form-item :label="editForm.user_agreement_us.description"
            :name="['user_agreement_us', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_user_agreement_us" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.user_agreement_us.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_user_agreement_us" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.user_agreement_hk">
          <a-form-item :label="editForm.user_agreement_hk.description"
            :name="['user_agreement_hk', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_user_agreement_hk" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.user_agreement_hk.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_user_agreement_hk" />
            </div>
          </a-form-item>
        </template>
        <!-- 隐私政策 -->
        <template v-if="editForm.privacy_policy">
          <a-form-item :label="editForm.privacy_policy.description"
            :name="['privacy_policy', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_privacy_policy" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.privacy_policy.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_privacy_policy" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.privacy_policy_us">
          <a-form-item :label="editForm.privacy_policy_us.description"
            :name="['privacy_policy_us', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_privacy_policy_us" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.privacy_policy_us.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_privacy_policy_us" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.privacy_policy_hk">
          <a-form-item :label="editForm.privacy_policy_hk.description"
            :name="['privacy_policy_hk', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_privacy_policy_hk" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.privacy_policy_hk.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_privacy_policy_hk" />
            </div>
          </a-form-item>
        </template>
        <!-- 基金会章程 -->
        <template v-if="editForm.articles_of_association">
          <a-form-item :label="editForm.articles_of_association.description"
            :name="['articles_of_association', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_articles_of_association" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.articles_of_association.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_articles_of_association" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.articles_of_association_us">
          <a-form-item :label="editForm.articles_of_association_us.description"
            :name="['articles_of_association_us', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_articles_of_association_us" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.articles_of_association_us.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_articles_of_association_us" />
            </div>
          </a-form-item>
        </template>
        <template v-if="editForm.articles_of_association_hk">
          <a-form-item :label="editForm.articles_of_association_hk.description"
            :name="['articles_of_association_hk', 'content']">
            <div style="border: 1px solid #ccc; margin-top: 10px">
              <Toolbar :editor="editorRef_articles_of_association_hk" :defaultConfig="editorConfig_toolbar" :mode="editorConfig_mode"
                style="border-bottom: 1px solid #ccc" />
              <Editor :defaultConfig="editorConfig_config" :mode="editorConfig_mode" v-model="editForm.articles_of_association_hk.content"
                style="height: 400px; overflow-y: hidden" @onCreated="editorCreated_articles_of_association_hk" />
            </div>
          </a-form-item>
        </template>

        <a-form-item :wrapper-col="{ offset: 5, span: 16 }">
          <a-button type="primary" html-type="submit" v-if="isSaveAuth">立即提交</a-button>
          <a-button type="primary" @click="noAuthTips" v-if="!isSaveAuth">立即提交（您没有此权限）</a-button>
          <a-button @click="editCancel" style="margin-left:10px;">取消</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, shallowRef } from 'vue';
import { message } from 'ant-design-vue';
import { getCommonSetData, chgCommonSet } from "@/api/admin";  //引入api
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import '@wangeditor/editor/dist/css/style.css';

const propsData = defineProps(['url_method', 'check_auth_list']);

const { uploadUrl, uploadAddHeaders } = inject('uploadInfo');  // 依赖注入--文件、图片上传地址、请求头等
const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名
const { adminCheckOption } = inject('adminCheckOption');  // 依赖注入--权限校验函数
const { refreshCurrentPage } = inject('refreshCurrentPage');  // 依赖注入--刷新当前页面

const isSaveAuth = adminCheckOption(propsData.check_auth_list.main, propsData.check_auth_list.sub, propsData.check_auth_list.option);  // 权限校验（是否有保存权限）

const isLoading = ref(false);    // 控制loading

const editForm = ref({
});  // 编辑表单

//根据参数获取数据
const getDataByType = () => {
  isLoading.value = true;
  getCommonSetData({}, propsData.url_method).then((res) => {
    isLoading.value = false;
    if (res === false) return;

    editForm.value = res.data;
  }).catch((rej) => {
    isLoading.value = false;
    message.error('获取数据失败：' + rej);
    editCancel();
  });
}

// 提交数据
const editPost = () => {
  isLoading.value = true;

  chgCommonSet(editForm.value).then((res) => {
    if (res === false) return;

    message.success('操作成功，即将刷新……');
    setTimeout(() => { editCancel() }, 1000);
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 跳转到列表页
const editCancel = () => {
  isLoading.value = false;
  refreshCurrentPage();
}

// 无权限提示
const noAuthTips = () => {
  message.error('您没有此权限，无法进行此操作！');
}

// 上传图片
const uploadFileChange = info => {
  if (info.file.status === 'uploading') {
    isLoading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    isLoading.value = false;
    if (info.file.response.code === 0) {
      editForm.value.img = info.file.response.data.down_path;
    } else {
      message.error(info.file.response.message);
    }
  }
  if (info.file.status === 'error') {
    isLoading.value = false;
    message.error('上传文件出错，请重新上传！');
  }
};

// 以下都是富文本有关
// 富文本--用户协议（中文）
const editorRef_user_agreement = shallowRef();
const editorCreated_user_agreement = (editor) => {
  editorRef_user_agreement.value = editor;
};
// 富文本--用户协议（英文）
const editorRef_user_agreement_us = shallowRef();
const editorCreated_user_agreement_us = (editor) => {
  editorRef_user_agreement_us.value = editor;
};
// 富文本--用户协议（繁体）
const editorRef_user_agreement_hk = shallowRef();
const editorCreated_user_agreement_hk = (editor) => {
  editorRef_user_agreement_hk.value = editor;
};
// 富文本--隐私政策（中文）
const editorRef_privacy_policy = shallowRef();
const editorCreated_privacy_policy = (editor) => {
  editorRef_privacy_policy.value = editor;
};
// 富文本--隐私政策（英文）
const editorRef_privacy_policy_us = shallowRef();
const editorCreated_privacy_policy_us = (editor) => {
  editorRef_privacy_policy_us.value = editor;
};
// 富文本--隐私政策（繁体）
const editorRef_privacy_policy_hk = shallowRef();
const editorCreated_privacy_policy_hk = (editor) => {
  editorRef_privacy_policy_hk.value = editor;
};
// 富文本--基金会章程（中文）
const editorRef_articles_of_association = shallowRef();
const editorCreated_articles_of_association = (editor) => {
  editorRef_articles_of_association.value = editor;
};
// 富文本--基金会章程（英文）
const editorRef_articles_of_association_us = shallowRef();
const editorCreated_articles_of_association_us = (editor) => {
  editorRef_articles_of_association_us.value = editor;
};
// 富文本--基金会章程（繁体）
const editorRef_articles_of_association_hk = shallowRef();
const editorCreated_articles_of_association_hk = (editor) => {
  editorRef_articles_of_association_hk.value = editor;
};
// 上传文件URL
const editorConfig_uploadFileUrl = '/'+import.meta.env.VITE_API_PROXY_KEY+'/admin/upload/imgWangEditor?upPath=wangeditor';
// 工具栏配置
const editorConfig_toolbar = {
  excludeKeys: [
    'headerSelect',
    'blockquote',
    'fullScreen',
    'emotion',
    'group-video',
    'todo',
    'codeBlock',
    'undo',
    'redo',
    'fontFamily' // 排除菜单组
  ]
};
// 编辑器配置
const editorConfig_config = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: editorConfig_uploadFileUrl,
      fieldName: 'img',
      maxFileSize: 10 * 1024 * 1024, // 10M 上传文件大小限制
      headers: uploadAddHeaders,
      withCredentials: true,
    },
  },
};
const editorConfig_mode = 'default';

// 页面加载完成后，获取数据列表
onMounted(() => {
  getDataByType();
})
</script>

<style scoped></style>